<!-- 自定义移动端的错误消息提示 -->
<template>
  <div class="mobile-message-box" :id="messageID" :class="getCurrentClass">
    <svg class="icon" aria-hidden="true">
      <use v-bind:xlink:href="`#${getCurrentSvg}`"></use>
    </svg>
    <div class="text">
      {{text}}
    </div>
  </div>
</template>

<script>
export default {
  name:'mobileMessage',
  props:{
    data:{
      type:Object
    }
  },
  data() {
    return {
      messageID:'',
      defaultTime:3,
      druation:null,
      type:'',
      text:''
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    init(){
      this.type = this.data.type
      this.text = this.data.text
      this.druation = this.data.druation
      let uuid = this.getUUId(),uuidNew = []
      uuid.split('').forEach(item => {
        if(item!='-'){
          uuidNew.push(item)
        }
      });
      this.messageID = `message-box-${uuidNew.join('')}`
      this.$nextTick(()=>{
        setTimeout(() => {
          document.getElementById(this.messageID).style['top'] = '1.875rem'
          document.getElementById(this.messageID).style.opacity = '1'
        }, 100);
        setTimeout(()=>{
          this.removeDom()
        },(this.druation || this.defaultTime) * 1000)
      })
    },
    getUUId(){
      return URL.createObjectURL(new Blob()).substr(-36)
    },
    removeDom(){
      if(document.getElementById(this.messageID)){
        document.getElementById(this.messageID).style.top = '-2.5rem'
        document.getElementById(this.messageID).style.opacity = '0'
        setTimeout(()=>{
          document.body.removeChild(document.getElementById(this.messageID))
        },200)
      }
    }
  },
  computed:{
    getCurrentSvg(){
      let svgName = ''
      switch (this.type) {
        case 'success':
          svgName = 'keowledge-mobile-a-zu5097'
          break;
        case 'error':
          svgName = 'keowledge-mobile-a-zu5094'
          break;
        case 'warning':
          svgName = 'keowledge-mobile-a-zu5095'
          break;
        default:
          svgName = 'keowledge-mobile-a-zu5096'
          break;
      }
      return svgName
    },
    getCurrentClass(){
      let className = ''
      switch (this.type) {
        case 'success':
          className = 'message-success'
          break;
        case 'error':
          className = 'message-error'
          break;
        case 'warning':
          className = 'message-warning'
          break;
        default:
          break;
      }
      return className
    }
  }
};
</script>

<style scoped lang="scss">
.mobile-message-box{
  position: fixed;
  z-index: 2001;
  opacity: 0;
  top: -2.5rem;
  width: calc(100vw - 4.5625rem);
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: .125rem;
  padding:0 .75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  border: .0625rem solid #1E6FFF;
  background: #F2F7FF;
  color:#363B4C;
  transition: all 0.5s;
  box-shadow: 0px 2px 6px 0px rgba(54,59,76,0.15);
  .icon{
    min-width: .875rem;
    width: .875rem;
    height: .875rem;
  }
  .text{
    font-size: .875rem;
    margin-left: .5625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.message-success{
  border-color: #36B452;
  background: #EFF9F2;
}
.message-error{
  border-color: #ff194c;
  background: #FFEDF1;
}
.message-warning{
  border-color: #FF9736;
  background: #FFF7EF;
}
</style>
